<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'照片'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="JSON.stringify(this.photo36) === '{}' ||
                    JSON.stringify(this.photo41) === '{}' ? '' : 'analyLightGreen'">照片</p>
            <div class="analyItemCon">
                <div class="col-md-6">
                    <span v-if="JSON.stringify(this.photo41) === '{}'" class="cLightGray col-md-3">一寸照片</span>
                    <span class="cLightGray col-md-8">
                    <rx-upload v-if="photoFlg==1 && JSON.stringify(this.photo41) === '{}'" :data="{id: 11,attrModelid:41}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'70px', height: '60px'}" @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                    <rx-viewer v-else class="fl" >
                        <div   class="look_imgHover fl relative pb20 tx-center" style="width:78px;height:78px;" >
                        <img  :src="photo41.attrPhoto" />
                            <div class="upload_finish_div">
                                <div class="upload_finish_bg"></div>
                                <div class="upload_finish_linksm">
                                    <div class="dis-il-block">
                                        <a href="javascript:;" class="ImgBtn enlarge_viewer enlarge_link" :data-src="photo41.attrPhoto"></a>
                                        <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo41.attr_infoid)"></a>

                                    </div>
                                </div>
                            </div>
                            <div class="imgInfo tx-center">一寸照片</div>
                              <!-- <input type="button" class="uiBtn-small uiBtn-red " value="删除"> -->
                        </div>
                    </rx-viewer>
                    </span>
                </div>
                <div class="col-md-6">
                    <span v-if="JSON.stringify(this.photo36) === '{}'"  class="cLightGray col-md-3">艺术照片</span>
                    <span class="col-md-9">
                    <rx-upload v-if="photoFlg==1 && JSON.stringify(this.photo36) === '{}'" :data="{id: 11,attrModelid:36}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'70px', height: '60px'}" @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                    <rx-viewer v-else class="fl" >
                        <div    class="look_imgHover fl relative tx-center pb20" style="width:78px;height:78px;" >
                            <img  :src="photo36.attrPhoto" />
                            <div class="upload_finish_div">
                                <div class="upload_finish_bg"></div>
                                <div class="upload_finish_linksm">
                                    <div class="dis-il-block">
                                        <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="photo36.attrPhoto"></a>
                                        <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo36.attr_infoid)"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="imgInfo tx-center">艺术照片</div>
                              <!-- <input type="button" class="uiBtn-small uiBtn-red " value="删除"> -->
                        </div>
                    </rx-viewer>
                    </span>
                </div>
            </div>
        </div>
    </div>
            <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
             <p class="fl">
                    <span v-if="JSON.stringify(this.photo36) === '{}' ||
                    JSON.stringify(this.photo41) === '{}'" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>
        </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import {savePhotoByUid, getUserPhotoList, delPhotoByUid} from '../../Resources/Api'
export default {
    data () {
        return {
            photo41: {},
            photo36: {},
            photoFlg: 1,
            evalImgArray: [], // 图片
            evalImg: '',
            perImgList: [],
            perImg: '',
            photoList: [] // 照片回显
        }
    },
    created () {
        this.getUserPhotoList()
    },
    methods: {
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        delImg (value) {
            delPhotoByUid({
                attrInfoId: value
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('删除成功')
                    // this.getUserPhotoList()
                    // this.setUpdatePlate()
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('删除指定照片失败' + err)
            })
        },
        // 形象照上传
        successUpload (value) {
            savePhotoByUid({
                uid: this.leftInfo.uid, // this.leftInfo.uid,
                attrModelid: value.data.attrModelid,
                userType: 1,
                attrServerUrl: '',
                attrFileUrl: value.src
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.$message('上传成功')
                    this.getUserPhotoList() // 银行卡回显
                    this.setUpdatePlate()
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // // 形象照回显
        // getUserListinfoPhoto () {
        //     getUserListinfoPhoto({
        //         uid: this.leftInfo.uid // this.leftInfo.uid,
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             this.photoList = res.data.Body
        //         }
        //         console.log(res.data.Body)
        //     }).catch(err => {
        //         console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
        //     })
        // },
        // 照片回显
        getUserPhotoList () {
            let _this = this
            _this.photo9 = {}
            getUserPhotoList({
                uid: this.leftInfo.uid // this.leftInfo.uid,
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.photoList = res.data.Body
                    if (this.photoList.length > 0) {
                        this.photoList.forEach(photo => {
                            if (Number(photo.attr_modelid) === 41) {
                                this.photo41 = photo
                            }
                            if (Number(photo.attr_modelid) === 36) {
                                this.photo36 = photo
                            }
                        })
                    }
                }
            }).catch(err => {
                console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
            })
        },
        successPerImg (value) {
            this.perImgList.push(value.src)
            this.perImg = this.perImgList.join(',')
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    }
}
</script>

